<template>
  <v-card @click="read(card.id)">
    <v-img
      :src="card.coverUrl"
      class="white--text align-end"
      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
      height="300px"
    >
      <v-card-title v-text="card.title"></v-card-title>
    </v-img>
    <v-card-text>
      <v-row align="center" class="mx-0">
        <!-- <v-rating
                  :value="4.5"
                  color="amber"
                  dense
                  half-increments
                  readonly
                  size="14"
                ></v-rating>

                <div class="grey--text ms-4">4.5 (413)</div> -->
      </v-row>

      <div class="my-4 text-subtitle-1">
        {{ changeDateFormat(card.ctime) }}
      </div>
      <div class="my-3">
        {{ card.desc }}
      </div>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>

      <v-btn icon @click="read(card.id)"> 阅览 </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data: function () {
    return {};
  },
  props: ["card"],
  methods: {
    read(id) {
      this.$router.push(`/work/${id}`);
    },
    formatDate(time) {
      let date = new Date(time);
      let newTime =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
      return newTime;
    },
  },
  computed: {
    changeDateFormat: function () {
      return function (value) {
        let time = new Date(value);
        return this.formatDate(time);
      };
    },
  },
};
</script>

<style scoped>
</style>